<template>
  <div class="Detal">
    <div class="one">
      <van-row type="flex">
        <van-col span="4">
          <van-image  round width="6rem" height="6rem" src="https://img.yzcdn.cn/vant/cat.jpeg" />
        </van-col>
        <van-col span="6" style='margin-top:10px' ><h2 style="text-align: left;">住户一<br><h3>2020-12-22 12：40</h3></h2></van-col><br>
        <van-col span = "24">
          <h2 h2 style="text-align: left;margin-left:10px">
            印刷厂招QQ接单员两名，要求：熟练操作电脑，会PS CDR软件者优先，不要求设计。有一定的沟通能力。无不良嗜好。外地男性提供食宿。地址:北京师范大学珠海分校麦当劳旁边，联系电话：15702095405
          </h2>
        </van-col>
      </van-row>
      <van-row type="flex" justify="end">
        <van-col span="2">
          <van-icon size="17" :class="{ 'shangse': isActive }" @click="shangse(1)" name="like" />
        </van-col>
        <van-col span="2">
          <van-icon size="17" name="comment-o" @click="one" />
        </van-col>
      </van-row>
    </div>
    <div class="two">
      <van-row type="flex">
        <van-col span="4">
          <van-image  round width="6rem" height="6rem" src="https://img.yzcdn.cn/vant/cat.jpeg" />
        </van-col>
        <van-col span="6"><h2 style="text-align: left">住户二<br><h3>2020-12-22 12：40</h3></h2></van-col><br>
        <van-col span = "24">
          <h2 h2 style="text-align:left;margin-left:10px">
            珠海京瑞文化传播有限公司（李群艺术培训学院）座落于珠海市香洲区迎宾南路2230号，是一家专业培训少儿拉丁舞、少儿形体芭蕾、少儿爵士舞，少儿街舞、少儿中国舞，少儿声乐培训：通俗唱法，美声唱法，少儿歌曲专辑录制等综合性服务，力求让每一位加入李群艺术培训学院的学员都能够享受舞蹈、声乐带给我们的快乐，最终都能化茧成蝶、成就梦想。我们以丰富的经验和诚恳服务的态度，秉承科学、系统、健康的理念，为优秀的学员提供展示的平台，为你的艺术人生打好基础。
          </h2>
        </van-col>
      </van-row>
      <van-row type="flex">
        <van-col span="24">
          <van-image  fit="contain" width="15rem" height="11rem" src="https://img.yzcdn.cn/vant/cat.jpeg" />
          <van-image  fit="contain" width="15rem" height="11rem" src="https://img.yzcdn.cn/vant/cat.jpeg" />
          <van-image  fit="contain" width="15rem" height="11rem" src="https://img.yzcdn.cn/vant/cat.jpeg" />
        </van-col>
         <van-col span="24">
          <van-image  fit="contain" width="15rem" height="11rem" src="https://img.yzcdn.cn/vant/cat.jpeg" />
          <van-image  fit="contain" width="15rem" height="11rem" src="https://img.yzcdn.cn/vant/cat.jpeg" />
          <van-image  fit="contain" width="15rem" height="11rem" src="https://img.yzcdn.cn/vant/cat.jpeg" />
        </van-col>
      </van-row>
      <van-row type="flex" justify="end">
        <van-col span="2">
          <van-icon size="17" :class="{ 'shangse': isActive1 }" @click="shangse(2)" name="like" />
        </van-col>
        <van-col span="2">
          <van-icon size="17" name="comment-o" @click="two"/>
        </van-col>
      </van-row>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { Col, Row, Image as VanImage, Icon } from 'vant'
Vue.use(Col).use(Row).use(VanImage).use(Icon)
export default{
  name: 'DetalCommunity',
  data () {
    return {
      isActive: 1,
      isActive1: 1
    }
  },
  methods: {
    shangse (index) {
      if (index === 1) {
        if (this.isActive === 1) {
          this.isActive = 0
        } else {
          this.isActive = 1
        }
      } else {
        if (this.isActive1 === 1) {
          this.isActive1 = 0
        } else {
          this.isActive1 = 1
        }
      }
    },
    one () {
      this.$router.push('one')
    },
    two () {
      this.$router.push('two')
    }
  }
}
</script>

<style scoped>
.one,.two{
  margin: 10px 0px 0px 0px ;
  padding: 0;
  width: 100%;
  height: auto;
  background-color: rgb(255, 255, 255);
}
.shangse{
  color :red
}
</style>
